<template>  <div>

  <table> 
    <tr>
      <td>厂牌型号：<input type="text" v-model="form.likechangpai">
      车牌号：<input type="text" v-model="form.likechepaihao">
        司机姓名：<input type="text" v-model="form.likename">
         所属公司：<input type="text" v-model="form.likegpognsi"></td>
         <td>
           <input type="button" value="查询" @click="xinashishow">
         </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="新增车辆" @click="tianjiachelaing">
        <input type="button" value="删除" @click="shanchus()">
      </td>
    </tr>
  </table>
  <div>
    
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column label="厂牌型号" width="120">
      <template slot-scope="scope">{{ scope.row.brandmodel }}</template>
    </el-table-column>
    <el-table-column prop="licenseplatenumber" label="车牌号" width="120"> </el-table-column>
    <el-table-column prop="driversname" label="司机名称" show-overflow-tooltip>
    </el-table-column>

       <el-table-column prop="company" label="所属公司" show-overflow-tooltip>
    </el-table-column>
       <el-table-column prop="model" label="车型（长*宽*高）" show-overflow-tooltip>
    </el-table-column>
       <el-table-column prop="vehiclecolor" label="车辆颜色" show-overflow-tooltip>
    </el-table-column>
       <el-table-column prop="purchasedate" label="购置日期" show-overflow-tooltip>
    </el-table-column>

       <el-table-column prop="operationcertificatenumber" label="运营证号" show-overflow-tooltip>
    </el-table-column>
       <el-table-column prop="insuranceexpirationtime" label="保险到期时间" show-overflow-tooltip>
    </el-table-column>
       <el-table-column prop="annualInspectionexpirationtime" label="年检到期时间" show-overflow-tooltip>
    </el-table-column>
       <el-table-column prop="maintenancekilometersettings" label="保养公里数" show-overflow-tooltip>
    </el-table-column>
       <el-table-column  label="操作" show-overflow-tooltip>
    <template slot-scope="scope">
<input type="button" value="删除" @click="shanchu(scope.row.id)" >
<input type="button" value="编辑" @click="bianji(scope.row.id)" >
    </template>

    </el-table-column>
  </el-table>

   <div class="block"> 
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="3"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalcount">
    </el-pagination>
  </div></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
         currentPage4: 1,
         totalcount:0,
         totalpage:0,
         span:[],
      form:{

 likechangpai:"",
       likechepaihao:"",
      likename:"",
 likegpognsi:"",
        pageindex:1,
        pagesize:3
      }
    };
  },
  created() {
    this.xinashishow();
  },
  methods: {
    bianji(row){
localStorage.setItem("saihfkns",row);
this.$router.push('/CheLiangXianShiBianJi')
    },

    tianjiachelaing(){
this.$router.push("/CheLiangXianShiCreate");
    },
    xinashishow() {
      this.$http
        .get("https://localhost:44357/WeatherForecast/CheliangShow",{params:this.form})
        .then((a) => {
          this.tableData = a.data.data;
           this.totalcount=a.data.totalcount;
              this.totalpage=a.data.totalpage;
        });
    }, handleSizeChange(val) {
      this.form.pagesize=val;
        console.log(`每页 ${val} 条`);
        this.xinashishow();
      },
      handleCurrentChange(val) {
        this.form.pageindex=val;
        this.xinashishow();
        console.log(`当前页: ${val}`);
      },
      shanchu(row){ 


        if(confirm("确定删除该数据么？"))
        {
          this.$http.post("https://localhost:44357/WeatherForecast/CheLiangGuanLiDelete?id="+row).then(a=>{
            if(a.data.code==200)
            {
              alert("删除成功");
              this.xinashishow();
            }
          })
        }
      },
        shanchus( ){ 


        if(confirm("确定删除选中的数据么？"))
        {
          if(this.span==0)
          {
            alert("请选择一条数据");
            return;
            }
            else
            {
               this.$http.post("https://localhost:44357/WeatherForecast/CheLiangGuanLiDeletes?id="+this.span).then(a=>{
            if(a.data.code==200)
            {
              alert("删除成功");
              this.xinashishow();
            }
          })
            }
           
          
          
        }
      },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.span=[];
      this.multipleSelection = val; 
   
         this.multipleSelection.forEach(element => {
        this.span.push(element.id);
      }); 

    },
  },
};
</script>